<template>
  <div class="cretificate-main">
    <el-row>
      <el-form ref="form" :model="searchdata" label-width="50px">
        <el-col>
          <div class="search-item">
            <!-- <el-form-item label="日期:"> -->
            <el-date-picker
              size="small"
              type="date"
              placeholder="选择下载日期"
              :picker-options="timeChange"
              v-model="searchdata.downloadDate"
              @change="searchtime"
            ></el-date-picker>
            <!-- </el-form-item> -->
            <!-- icon="el-icon-search" -->
            <el-button style="margin-left:30px" type="primary" size="small" @click="searchbtn">搜索</el-button>
            <!-- icon="el-icon-refresh" -->
            <el-button type="info" size="small" style="margin-left:15px;" @click="restbtn">重置</el-button>
          </div>
        </el-col>
      </el-form>
    </el-row>

    <!-- <el-row :gutter="5">
      <el-col class="batch-btn">
        <el-button type="success" size="small" icon="el-icon-download" @click="outExceldo"
          >导出Excel</el-button
    >-->
    <!-- <el-button type="danger" icon="el-icon-delete-solid" @click="deletebtn">删除</el-button> -->
    <!-- </el-col>
    </el-row>-->
    <el-table
      V-loading="loading"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%;"
      :cell-style="{'text-align':'center'}"
      :header-cell-style="getRowClass"
      @selection-change="handleSelectionChange"
      @row-click="rowbtn"
      border
    >
      <el-table-column type="selection" width="55px"></el-table-column>
      <el-table-column label="序号" width="100px">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="downloadSuccess" label="下载成功"></el-table-column>
      <el-table-column prop="downloadFail" label="下载失败"></el-table-column>

      <el-table-column prop="notDownload" label="未下载"></el-table-column>
      <el-table-column label="下载日期">
        <template slot-scope="scope">{{ scope.row.downloadDate }}</template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage1"
      :page-sizes="[10, 20, 30]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="toal"
    ></el-pagination>
  </div>
</template>

<script>
import { returnInfo, getPalindromesearching } from "../../api/datastac";
import { mapMutations } from "vuex";
import plalindromeExcel from "../../utils/outExcel/plalindromeExcel";

export default {
  components: {},
  props: {},
  data() {
    return {
      tableData: [],
      currentPage1: 1,
      batchdata: {
        timeendvalue: "",
      },
      ids: [],
      timeChange: {
        disabledDate(time) {
          return (
            time.getTime() < Date.now() - 3600 * 1000 * 24 * 183 ||
            time.getTime() > Date.now()
          ); //选择时间范围
        },
      },
      toal: 0,
      pageDto: {
        pageNum: 1,
        pageSize: 10,
      },
      // 初始检索数据
      searchdata: {
        downloadDate: "",
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    ...mapMutations([
      "changePageSizeData",
      "changePageNumeData",
      "changePageToal",
      "setoutexcelId",
      "setoutexcelclassId",
      "batchid",
    ]),
    // 表格第一行显示背景
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:#F5F7FA;text-align:center;";
      } else {
        return "";
      }
    },
    // 获取回文信息
    getreturnInfo(data) {
      returnInfo(data)
        .then((res) => {
          if (res.data.code == 200) {
            this.toal = res.data.data.total;
            this.tableData = res.data.data.list;
            this.getcertId(this.tableData);
          } else {
            this.tableData = [];
          }
        })
        .catch((err) => {
          return err;
        });
    },

    //每页显示的条数
    handleSizeChange(val) {
      // this.changePageSizeData(val);
      this.pageDto.pageSize = val
      this.searchbtn();
      // this.getreturnInfo(this.$store.state.pagedata);
    },
    // 页数切换
    handleCurrentChange(val) {
      // this.changePageNumeData(val);
      this.pageDto.pageNum = val
      this.searchbtn();
      // this.getreturnInfo(this.$store.state.pagedata);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.getcertId(val);
    },
    // 单击某一行时选中
    rowbtn(val) {
      this.toggleSelection([val]);
    },
    // 搜索
    searchbtn() {
      if (this.searchdata.downloadDate == "") {
        // this.$message({
        //   type: "warning",
        //   message: "选择日期",
        // });
         this.getreturnInfo(this.pageDto);
      } else {
        this.searchdata.pageNum = this.pageDto.pageNum
        this.searchdata.pageSize = this.pageDto.pageSize
        this.getsearchdata(this.searchdata);
      }
    },

    // 检索用户资料信息
    getsearchdata(data) {
      getPalindromesearching(data)
        .then((res) => {
          if (res.data.code == 200) {
            this.toal = res.data.data.total;
            this.tableData = res.data.data.list;
            this.getcertId(this.tableData);
          } else {
            this.tableData = [];
          }
        })
        .catch((err) => {
          return err;
        });
    },
    timedispose(time) {
      let date = new Date(time);
      return `${date.getFullYear()}-${this.zero(
        date.getMonth() + 1
      )}-${this.zero(date.getDate())}`;
    },
    // 时间补零
    zero(n) {
      return n > 10 ? n : "0" + n;
    },
    //创建时间处理
    searchtime() {
      this.searchdata.downloadDate = this.timedispose(
        this.searchdata.downloadDate
      );
    },
    getcertId(val) {
      this.ids = [];
      val.filter((item) => {
        this.ids.push(item.id);
      });
    },
    // 导出Excel
    outExceldo() {
      plalindromeExcel(this.ids);
    },
    // 重置
    restbtn() {
      // this.getreturnInfo({
      //   pageNum: 1,
      //   pageSize: 10,
      // });
      this.searchdata.downloadDate = ""
    },
  },
  created() {},
  mounted() {
    this.getreturnInfo(this.pageDto);
  },
};
</script>
<style lang="less" scoped>
@max1920: ~"(max-width: 1920px)";
.cretificate-main {
  // border: 1px solid red;
  box-sizing: border-box;
  .search-item {
    min-width: 300px;
    /deep/.el-form-item__label {
      color: #333;
      font-weight: bold;
      text-align: left;
    }
    /deep/.el-date-editor--date {
      box-sizing: border-box;
    }
  }

  .batch-btn {
    box-sizing: border-box;
    .searchdown {
      display: inline-block;
      color: #333;
      font-weight: bold;
    }
  }
  /deep/.el-table {
    margin: 20px 0px 0 0;
    box-sizing: border-box;
  }
  /deep/.el-pager .number {
    background: #fff;
    border: 1px solid #dcdfe6;
    margin: 0 5px;
    border-radius: 2px;
    &.active {
      background-color: #409eff;
      color: #fff;
      border: 1px solid #409eff;
    }
  }
  .search-item .el-input__prefix,
  .el-input__suffix {
    top: 0;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 177px;
  }
}
</style>

